import React, {FC, useEffect} from 'react';
import {View, FlatList, StyleSheet} from 'react-native';
import Title from './components/Title';
import Item from './components/Item';
import ShopStore from '../../stores/ShopStore';
import Header from './components/Header';
import {observer} from 'mobx-react';
import Footer from './components/Footer';
type PropsType = {};
const Shop: FC<PropsType> = observer(() => {
  useEffect(() => {
    ShopStore.requestGoodsList();
    ShopStore.requestTop10Category();
  }, []);

  const refreshList = () => {
    ShopStore.resetPage();
    ShopStore.requestGoodsList();
  };
  const loadMoreData = () => {
    ShopStore.requestGoodsList();
  };
  return (
    <View style={styles.root}>
      <Title />
      <FlatList
        style={styles.flatList}
        data={ShopStore.goodsList}
        keyExtractor={item => `${item.id}`}
        renderItem={({item}) => <Item item={item} />}
        numColumns={2}
        refreshing={ShopStore.refreshing}
        onRefresh={refreshList}
        onEndReachedThreshold={0.1}
        onEndReached={loadMoreData}
        ListHeaderComponent={<Header />}
        ListFooterComponent={<Footer />}
      />
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
  },
  flatList: {
    flex: 1,
  },
});
export default Shop;
